<template>
  <el-card>
     <el-form
     ref="addForm"
     label-width="100px"
     :model="addData"
     :rules="rules"
     >
         <el-form-item label="角色名称" prop="roleid">
             <el-select v-model="addData.roleid"  >
                <el-option v-for="item in roleList" :key="item.id"  :label="item.rolename"  :value="item.id"></el-option>
                <!-- 这里的value不是动态绑定是添加不了的 -->
                <!-- value是要提交给后端的 -->
             </el-select>
         </el-form-item>
         <el-form-item label="账号" prop="username">
             <el-input v-model="addData.username" placeholder="请输入管理员账号" ></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
             <el-input v-model="addData.password" placeholder="请输入密码" ></el-input>
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-radio-group v-model="addData.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item>
             <el-button type="primary" @click="submitForm">提交</el-button>
             <el-button type="default" @click="resetForm">重置</el-button>
         </el-form-item>
     </el-form>
  </el-card>
</template>

<script>
// 导入角色
import {getRoleList} from '../../request/role'
export default {
    data(){
        return {
            roleList:[],
            addData:{
                roleid:'',
                username:'',
                password:'',
                status:''
            },
            // 表单效验规则
            rules:{
                roleid:{required:true,message:'请输入角色'},
                username:{required:true,message:'请输入管理员名称'},
                password:{required:true,message:'请输入密码'},
                status:{required:true,message:'请选择状态'}
            }
        }
    },
    methods:{
        async getRoleList(){
            const list=await getRoleList()
            if(list){
                //更新数据
                this.roleList=list
            }
        },
        // 表单提交
        submitForm(){
            this.$refs.addForm.validate(async valid=>{
                if(valid){
                    const res=await this.$http.post('/api/useradd',this.addData)
                    console.log(res)
                    if(res.code===200){
                        this.$success('提交成功')
                        return this.$router.push('/admin')
                    }
                    this.$error('提交失败')
                }
            })
        },
        resetForm(){
            //表单重置的方法
            this.$refs.addForm.resetFileds()
        }
    },
    created(){
        this.getRoleList()
    }
}
</script>

<style lang="less" scoped>
.el-form{
    width: 600px;
    margin: auto;
}
</style>